<template>
    <div>
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
            点我打开
        </el-button>
        <el-drawer
                size="50%"
                title="购物车"
                :visible.sync="drawer"
                :direction="direction"
        >
            <el-table :data="gridData" class="overflowAuto">
                <el-table-column label="产品" min-width="300" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div class="css-gqgqn7" :title="scope.row.title">
                            <div>
                                <el-image class="image" :src="scope.row.variant.image.src"></el-image>
                            </div>
                            <div>
                                <span class="css-194uh53"  >{{scope.row.title.length>20?scope.row.title.substr(0,20)+"...":scope.row.title}}</span>
                                <span class="css-p6qoo3">{{scope.row.variant.title}},￥{{scope.row.variant.price}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="quantity" width="110" align="center" label="数量">
                    <template slot-scope="scope">
                        <el-input-number style="width: 82px" @change="handleChange(scope.row)" v-model="scope.row.quantity"
                                         :min="1" :max="99"
                                         controls-position="right"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-close"
                                @click="handleDelete(scope.row)"
                        >
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                drawer: true,
                direction: 'rtl',
                gridData: [{
                    id: "60ac63c3de20de58853d98c8",
                    title: 'Java 贴纸 springboot springmvcspringmvcspringmvcspringmvcspringmvc',
                    quantity: 1,
                    variant: {
                        id: '5e89944a11bc8707167ccdfe',
                        image: {
                            id: '5e89940611bc8707167ccdf9',
                            altText: 'java 贴纸',
                            src: "https://www.smallsticker.com/static/bcf68dc4954be9dc0ead23c2bc94f9fe/7ff18/7332ea77450b5aa6c7fb6c0f8cbd6555.webp"
                        },
                        product: {
                            handle: 'java',
                            title: '贴纸'
                        },
                        price: 9.9,
                        sku: 'java',
                        title: '标准'
                    }
                }, {
                    id: "60ac64a3de20de58853d98cc",
                    title: 'Node 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e899b8211bc8707167cce14',
                        image: {
                            id: '5e89989411bc8707167cce07',
                            altText: 'node 贴纸',
                            src: "https://www.smallsticker.com/static/074b276a13fd53f6e947116a3cfd3117/7ff18/b78f86075a51ff4f08ec26beb154dcc9.webp"
                        },
                        product: {
                            handle: 'node',
                            title: 'node 贴纸'
                        },
                        price: 9.9,
                        sku: 'node',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6541de20de58853d98ce",
                    title: 'Spring 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e8c603e11bc8707167ccfe2',
                        image: {
                            id: '5e8c600a11bc8707167ccfde',
                            altText: 'Spring 贴纸',
                            src: "https://www.smallsticker.com/static/68c06850766f437c7b951625b8b9e21d/7ff18/4845148f169087949a829d51f70878cf.webp"
                        },
                        product: {
                            handle: 'Spring',
                            title: 'Spring 贴纸'
                        },
                        price: 9.9,
                        sku: 'Spring',
                        title: '标准'
                    }
                }, {
                    id: "60ac6706de20de58853d98d5",
                    title: 'vim 贴纸',
                    quantity: 1,
                    variant: {
                        id: '5e89944a11bc8707167ccdfe',
                        image: {
                            id: '5e89940611bc8707167ccdf9',
                            altText: 'vim 贴纸',
                            src: "https://www.smallsticker.com/static/aeeaf2c7334b468657178564ed547879/7ff18/46d32dd11d53ab5256d14c56a02fec92.webp"
                        },
                        product: {
                            handle: 'vim',
                            title: 'vim 贴纸'
                        },
                        price: 9.9,
                        sku: 'vim',
                        title: '标准'
                    }
                }],
            };
        },
        props: {},
        methods: {
            handleDelete(row) {
                console.log(row)
            },
            handleChange(row) {
                console.log(row);
            }
        }
    }
</script>

<style scoped>
    .image {
        cursor: pointer;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .css-194uh53 {
        display: block;
        font-size: 1rem;
        line-height: 1.2;
    }

    .css-p6qoo3 {
        color: rgb(126, 113, 138);
        display: block;
        font-size: 0.95rem;
        font-style: normal;
    }

    .css-gqgqn7 {
        -webkit-box-align: center;
        align-items: center;
        border-bottom: 1px solid rgb(245, 243, 247);
        display: flex;
        -webkit-box-pack: justify;
        justify-content: center;
        padding: 10px 0px;
    }

    .overflowAuto {
        overflow-y: auto;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .overflowAuto::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }
    .overflowAuto::-webkit-scrollbar-thumb {
        background: rgb(224, 214, 235);
    }
</style>
